<template>
  <div class="newComment">
    <div class="title">
      <div style="color: black">最新评论</div>
      <div><a style="color: black" href="#/comment/index">全部评论</a></div>
    </div>
    <div class="commentList">
      <div v-for="item in commentList" :key="item.id" class="items">
        <div>
          {{ item.name }} 在 <a>文章</a> 评论
          <el-popover
            placement="top-start"
            title="评论详情-HTML内容"
            width="200"
            trigger="hover"
          >
            <div v-html="item.html" />
            <a
              slot="reference"
              type="text"
              size="adopt"
            >查看内容</a>
          </el-popover>
          <span
            class="yuna"
            :style="item.pass ? 'background: #52c41a;' : 'background: #faad14;'"
          />{{ item.pass ? "通过" : "未通过" }}
        </div>
        <div class="operation">
          <a @click="adoptClick(item)">通过</a>
          <a @click="refuseClick(item)">拒绝</a>
          <a @click="addCmtClick(item)">回复</a>

          <el-popconfirm
            placement="top"
            title="确认删除这个评论?"
            @onConfirm="delClick(item)"
          >
            <a
              slot="reference"
              style="border: 0"
              type="text"
              size="del"
            >删除</a>
          </el-popconfirm>
        </div>
      </div>
    </div>
    <!-- 回复对话框 -->
    <el-dialog title="回复评论" :visible.sync="dialogVisible" width="30%">
      <el-input v-model.trim="reply" placeholder="支持Markdown" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addComments">回 复</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      dialogVisible: false,
      reply: '',
      prantVal: {}
    }
  },
  created() {
    this.getCommentList()
  },
  computed: {
    ...mapState({
      commentList: (state) => state.workbench.commentList
    })
  },
  methods: {
    ...mapActions({
      getCommentList: 'workbench/getCommentList',
      adoptComment: 'comment/adoptComment',
      addComment: 'comment/addComment',
      deleteComment: 'comment/deleteComment'
    }),
    // 通过
    async adoptClick(val) {
      const adopt = {
        val,
        adopts: true
      }
      await this.adoptComment(adopt)
      await this.getCommentList()
    },
    // 拒绝
    async refuseClick(val) {
      const adopt = {
        val,
        adopts: false
      }
      await this.adoptComment(adopt)
      await this.getCommentList()
    },
    // 回复
    addCmtClick(val) {
      this.prantVal = val
      this.dialogVisible = true
    },
    async addComments() {
      this.dialogVisible = false
      if (this.reply !== '') {
        const { name } = JSON.parse(localStorage.getItem('user'))
        const { hostId, parentCommentId, replyUserEmail, replyUserName, url } =
          this.prantVal
        const payload = {
          content: this.reply,
          createByAdmin: true,
          email: '4651685@qq.com',
          hostId,
          name,
          parentCommentId,
          replyUserEmail,
          replyUserName,
          url
        }
        await this.addComment(payload)
        await this.getCommentList()
      }
    },
    // 删除
    async delClick(val) {
      await this.deleteComment(val)
      await this.getCommentList()
    }
  }
}
</script>

<style lang="scss" scoped>
.newComment {
  background-color: #fff;
  margin-top: 24px;
  .title {
    display: flex;
    padding: 24px;
    border-bottom: 1px solid #eee;
    justify-content: space-between;
  }
  .commentList {
    width: 100%;
    padding: 20px 0 0 0;
    .items {
      display: flex;
      height: 58px;
      margin: 0px 20px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      align-items: center;
      .yuna {
        position: relative;
        top: -1px;
        display: inline-block;
        width: 6px;
        height: 6px;
        vertical-align: middle;
        border-radius: 50%;
        margin: 0px 10px;
      }
      .operation {
        display: flex;
        a {
          display: inline-block;
          margin: 0px 0px;
          padding: 0px 5px;
          border-right: 1px solid #eee;
        }
      }
    }
  }
}
</style>
